<template>
	<view class="page">
		<scroll-view scroll-y class="content">
			<view class="head_box">
				<view class="left_head_box">
					<view class="zs_head_box" v-if="loginStatus">
						<image :src="userData.avatar" mode="scaleToFill" />
					</view>
					<view class="zs_head_box" v-else>
						<image @click="goLogin" src="https://www.dingxians.cn/upload/images/user/avatar.png"
							mode="scaleToFill" />
					</view>
					<view class="phone_box">
						<!-- 登录 -->
						<template v-if="loginStatus">
							<view class="dhh_box">{{ userData.nickname || '' }}</view>
							<view class="id_box">
								<view class="zs_id_box">ID：{{ userData.id || ''}}</view>
								<view class="copy_box " @click="copyId(userData.id)">
									<image src="../../static/user/25.png" mode="scaleToFill" />
								</view>
								<view class="vip_box">
									VIP{{ userData.level_id || ''}}
								</view>

							</view>
						</template>
						<!-- 未登录 -->
						<template v-else>
							<view class="go_l_box">点击头像去登录</view>
						</template>
					</view>
				</view>
				<view class="rt_head_box">
					<view class="dange_box" style="margin-right: 30rpx;"
						@click="header(`/packageB/content/message`, 1, true)">
						<view class="tp_box">
							<image src="../../static/user/21.png" mode="scaleToFill" />
						</view>
						<view class="text_box">消息</view>
					</view>
					<view class="dange_box" @click="header(`/pages/user/about`, 1, true)">
						<view class="tp_box">
							<image src="../../static/user/20.png" mode="scaleToFill" />
						</view>
						<view class="text_box">设置</view>
					</view>
				</view>
			</view>

			<!-- 仓库，金币，优惠券 -->

			<view class="gold_box">
				<view class="dange_box" @click="header(`/pages/user/balance`, 1, true)">
					<view class="t_box">{{ userData.balance || 0 }}</view>
					<view class="b_box">金币</view>
				</view>
				<view class="dange_box" @click="header(`/pages/user/point_log`, 1, true)">
					<view class="t_box">{{ userData.point || 0 }}</view>
					<view class="b_box">钻石</view>
				</view>
				<view class="dange_box" @click="header(`/pages/user/coupon`, 1, true)">
					<view class="t_box">{{ userData.coupon_count || 0 }}</view>
					<view class="b_box">优惠券</view>
				</view>
			</view>
			<!-- vip -->
			<view class="zs_vp_box" @click="header(`/pages/user/vip`, 1, true)">
				<view class="left_vp_box">
					<view class="vp_icon_box">
						<image src="../../static/user/24.png" mode="scaleToFill" />
					</view>
					<view class="vp_j_box">VIP{{ userData.level_id || 0 }}</view>
				</view>
				<view class="rt_hyzx_box">
					<view class="huiyuan_box">会员中心</view>
					<view class="you_icon">
						<image src="../../static/user/22.png" mode="scaleToFill" />
					</view>
				</view>
			</view>

			<!-- 绑定福利 -->
			<view class="benefit_box">
				<view class="left_img_box" @click="bdYqm">
					<image src="../../static/user/bd.png" mode="scaleToFill" />
				</view>
				<view class="left_img_box" @click="header(`/packageA/packet/index`, 1, true)">
					<image src="../../static/user/redb.png" mode="scaleToFill" />
				</view>
			</view>
			<!-- 订单 -->
			<view class="order_box">
				<view class="order_top_text">
					<view class="o_text">我的订单</view>
					<view class="r_icon" @click="goOrder('0')">
						<image src="../../static/user/22.png" mode="scaleToFill" />
					</view>
				</view>
				<view class="order_dibu_box">
					<view class="dange_box" v-for="(item, index) in orderList" :key="index" @click="goOrder(item.id)">
						<view class="top_img_box">
							<image :src="item.img" mode="scaleToFill" />
						</view>
						<view class="botto_txt_box">{{ item.txt }}</view>
					</view>
				</view>
			</view>
			<!-- 功能 -->
			<view class="fun_box" v-if="userData.is_show == 1">
				<view class="dange_box" v-for="(item, index) in funList" :key="index" @click="gofun(item)">
					<view class="top_img_box">
						<image :src="item.img" mode="scaleToFill" />
					</view>
					<view class="botto_txt_box">{{ item.text }}</view>
				</view>
				<view style="width: 25%;" v-for="i in 3"></view>
			</view>
			<view class="fun_box" v-else>
				<view class="dange_box" v-for="(item, index) in funList1" :key="index" @click="gofun(item)">
					<view class="top_img_box">
						<image :src="item.img" mode="scaleToFill" />
					</view>
					<view class="botto_txt_box">{{ item.text }}</view>
				</view>
				<view style="width: 25%;" v-for="i in 3"></view>
			</view>
		</scroll-view>
		<my-alert-dialog ref="kefuDialog" title="请截图扫码加客服微信" cancel-string="关闭" :showConfirm="false">
			<image :src="erImg" mode="scaleToFill" style="width: 300rpx; height: 300rpx; margin: 50rpx auto;" />
		</my-alert-dialog>


		<!-- 绑定 -->
		<uni-popup type="dialog" ref="alertDialog" :title="!userData.is_bind ? '请输入邀请码' : '已绑定'" @cancel="cancel"
			@confirm="bind">
			<view class="pop_box" v-if="!userData.is_bind">
				<input class="pop_code" v-model="codeParams.code" placeholder="请输入邀请码" />
				<view class="action-btn-group">
					<image class="action-btn" mode="aspectFill" @click="cancel"
						src="https://www.dingxians.cn/upload/images/common/btn-cancel.png"></image>
					<image class="action-btn" mode="aspectFill" @click="bind"
						src="https://www.dingxians.cn/upload/images/common/btn-confirm.png"></image>
				</view>
			</view>

			<view class="pop_box" v-else>
				<view class="pop_user_box">
					<image class="pop_user_avatar" :src="userData.parent.avatar"></image>
					<view class="pop_user">
						<view class="pop_user_nickname">昵称：{{ userData.parent.nickname }}</view>
						<view class="pop_user_id">ID：{{ userData.parent_id }}</view>
					</view>
				</view>
				<view class="action-btn-group">
					<view class="action-btn btn-primary" mode="aspectFill" @click="cancel">关闭</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>
<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				code: '', //邀请码
				loginStatus: false,
				orderList: [{
						id: 1,
						url: '/pages/order/index',
						img: '../../static/user/04.png',
						txt: '待付款'
					},
					{
						id: 2,
						img: '../../static/user/01.png',
						url: '/pages/order/index',
						txt: '待发货'
					},
					{
						id: 3,
						img: '../../static/user/02.png',
						url: '/pages/order/index',
						txt: '待收货'
					},
					{
						id: 4,
						img: '../../static/user/03.png',
						url: '/pages/order/index',
						txt: '已完成'
					},
				],
				funList: [{
						id: 0,
						img: '../../static/user/12.png',
						url: '/pages/user/promotion',
						text: '申请推广'
					},
					{
						id: 1,
						img: '../../static/user/05.png',
						url: '/pages/activity/invite',
						text: '邀请有奖'
					},
					{
						id: 2,
						img: '../../static/user/06.png',
						url: '/pages/user/order',
						text: '开箱记录'
					},
					{
						id: 3,
						img: '../../static/user/07.png',
						url: '/packageB/content/cooperate',
						text: '商务合作'
					},
					{
						id: 4,
						img: '../../static/user/08.png',
						url: '/packageB/content/question',
						text: '常见问题'
					},
					{
						id: 5,
						img: '../../static/user/09.png',
						url: '/packageB/content/feedback',
						text: '问题反馈'
					},
					{
						id: 6,
						img: '../../static/user/10.png',
						url: '',
						text: '联系客服'
					},
					{
						id: 7,
						img: '../../static/user/11.png',
						url: '/pages/user/giveList',
						text: '赠礼记录'
					},
				],
				funList1: [{
						id: 0,
						img: '../../static/user/12.png',
						url: '/pages/user/promotion',
						text: '申请推广'
					},
					{
						id: 2,
						img: '../../static/user/06.png',
						url: '/pages/user/order',
						text: '开箱记录'
					},
					{
						id: 3,
						img: '../../static/user/07.png',
						url: '/packageB/content/cooperate',
						text: '商务合作'
					},
					{
						id: 4,
						img: '../../static/user/08.png',
						url: '/packageB/content/question',
						text: '常见问题'
					},
					{
						id: 5,
						img: '../../static/user/09.png',
						url: '/packageB/content/feedback',
						text: '问题反馈'
					},
					{
						id: 6,
						img: '../../static/user/10.png',
						url: '',
						text: '联系客服'
					},
					{
						id: 7,
						img: '../../static/user/11.png',
						url: '/pages/user/giveList',
						text: '赠礼记录'
					},
				],
				userData: {}, //用户信息
				codeParams: {
					code: '',
				},
				erImg: ''
			}
		},
		onShow() {
			this.loginStatus = uni.getStorageSync('token')
			if (this.loginStatus) {
				this.userInfo()
				this.kefu()
			}
		},
		methods: {
			// 客服微信
			kefu() {
				api.settings.show().then(res => {
					this.erImg = res.data.customer
				})
			},
			// 我的订单
			goOrder(id) {
				uni.navigateTo({
					url: '/pages/order/index?status=' + id
				})
			},
			// 功能跳转
			gofun(item) {
				if (item.id == 6) {
					this.$refs.kefuDialog.show()
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			bind() {
				if (this.codeParams.code) {
					api.users
						.bind(this.codeParams)
						.then((res) => {
							if (res.code === 200) {
								this.show('绑定成功')
								this.$refs.alertDialog.close()
								this.userInfo()
							}
						})
						.catch((error) => {
							console.log(error)
						})
				} else {
					this.show('请输入口令码')
				}

			},
			// 绑定邀请码
			bdYqm() {
				this.$refs.alertDialog.open("center")
			},
			// 关闭邀请码弹窗
			cancel() {
				this.$refs.alertDialog.close()
			},
			// 登录
			goLogin() {
				this.header('/pages/user/login')
			},
			// 复制id
			copyId(id) {
				uni.setClipboardData({
					data: id.toString(),
					success: () => {
						this.show('id已复制')
					},
					fail: () => {},
				})
			},
			// 用户信息
			userInfo() {
				uni.showLoading({
					title: '数据加载中',
				})
				api.users.show().then((res) => {
						uni.hideLoading()
						if (res.code === 200) {
							this.userData = res.data

							if (this.userData) {
								uni.setStorageSync('nickname', this.userData.nickname)
								uni.setStorageSync('avatar', this.userData.avatar)
								uni.setStorageSync('user_id', this.userData.id)
								uni.setStorageSync('total_rech', this.userData.grow_value)
								uni.setStorageSync('is_anchor', this.userData.is_anchor)
								console.log(res,"resresres")
							}
						} else if (res.code == 400) {
							this.loginStatus = false
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		background-image: url('https://www.dingxians.cn/upload/20240731/66a9d6bc189f5.jpg');
		background-size: 100% 100%;

		.content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding-top: 150rpx;

			.head_box {
				width: 100%;
				height: 112rpx;
				box-sizing: border-box;
				padding: 0 38rpx 0 55rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 60rpx;

				.left_head_box {
					width: 466rpx;
					height: 112rpx;
					display: flex;
					justify-content: flex-start;

					.zs_head_box {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						background-color: #fff;
						margin-right: 32rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.phone_box {
						height: 112rpx;

						.go_l_box {
							height: 112rpx;
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 700;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 112rpx;
						}

						.dhh_box {
							height: 52rpx;
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 700;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 52rpx;
							margin-bottom: 12rpx;
						}

						.id_box {
							height: 34rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.zs_id_box {
								height: 34rpx;
								font-family: Source Han Sans, Source Han Sans;
								font-weight: 500;
								font-size: 32rpx;
								color: #FFFFFF;
								line-height: 34rpx;
								margin-right: 12rpx;
							}

							.copy_box {
								width: 34rpx;
								height: 34rpx;
								// background-color: red;
								margin-right: 32rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.vip_box {
								border: 2rpx solid #FFAA00;
								height: 34rpx;
								box-sizing: border-box;
								border-radius: 25rpx;
								padding: 0 20rpx;
								text-align: center;
								font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
								font-weight: 700;
								font-size: 24rpx;
								color: #FFAA00;
								line-height: 34rpx;
							}
						}
					}

				}

				.rt_head_box {
					margin-top: 40rpx;
					height: 70rpx;
					display: flex;
					justify-content: space-between;

					.dange_box {
						width: 42rpx;
						height: 70rpx;

						.tp_box {
							width: 42rpx;
							height: 40rpx;
							margin-bottom: 6rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text_box {
							height: 24rpx;
							font-weight: 400;
							font-size: 16rpx;
							color: #FFFFFF;
							line-height: 24rpx;
							text-align: center;
						}
					}
				}
			}

			// 仓库
			.gold_box {
				width: 100%;
				height: 94rpx;
				box-sizing: border-box;
				padding: 0 100rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.dange_box {
					height: 94rpx;

					.t_box {
						height: 52rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 700;
						font-size: 36rpx;
						color: #FFFFFF;
						line-height: 52rpx;
						text-align: center;
						margin-bottom: 8rpx;
					}

					.b_box {
						height: 34rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
					}
				}
			}

			.zs_vp_box {
				width: 710rpx;
				height: 94rpx;
				background: linear-gradient(270deg, #1B1B26 0%, #2C2B3A 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #FEE4C4;
				margin: auto;
				box-sizing: border-box;
				padding: 0 16rpx 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 26rpx;

				.left_vp_box {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.vp_icon_box {
						width: 72rpx;
						height: 68rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.vp_j_box {
						height: 94rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #FEE4C4;
						line-height: 94rpx;
					}
				}

				.rt_hyzx_box {
					display: flex;
					justify-content: flex-end;

					.huiyuan_box {
						height: 40rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #FEE4C4;
						line-height: 40rpx;
					}

					.you_icon {
						width: 14rpx;
						height: 24rpx;
						margin-left: 12rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.benefit_box {
				width: 100%;
				height: 126rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 26rpx;

				.left_img_box {
					width: 346rpx;
					height: 126rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

			}

			.order_box {
				width: 716rpx;
				height: 200rpx;
				background: linear-gradient(270deg, rgba(27, 27, 38, 0.8) 0%, rgba(44, 43, 58, 0.8) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #FEE4C4;
				margin: auto;
				box-sizing: border-box;
				padding-top: 10rpx;

				.order_top_text {
					width: 100%;
					height: 40rpx;
					box-sizing: border-box;
					padding: 0 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.o_text {
						height: 40rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 50rpx;
					}

					.r_icon {
						width: 12rpx;
						height: 22rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.order_dibu_box {
					width: 100%;
					height: 100rpx;
					display: flex;
					box-sizing: border-box;
					justify-content: space-between;
					padding: 0 40rpx;

					.dange_box {
						height: 100rpx;

						.top_img_box {
							width: 64rpx;
							height: 64rpx;
							margin-bottom: 2rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.botto_txt_box {
							width: 72rpx;
							height: 34rpx;
							font-family: Source Han Sans, Source Han Sans;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 34rpx;
							text-align: center;
						}
					}
				}

			}

			.fun_box {
				width: 716rpx;
				background: linear-gradient(270deg, rgba(27, 27, 38, 0.8) 0%, rgba(44, 43, 58, 0.8) 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #FEE4C4;
				margin: auto;
				margin-top: 26rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				// padding: 0 40rpx;
				padding-top: 26rpx;

				.dange_box {
					width: 25%;
					height: 100rpx;
					margin-bottom: 26rpx;

					.top_img_box {
						margin: auto;
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 6rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.botto_txt_box {
						width: 100%;
						height: 34rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						text-align: center;
					}
				}
			}
		}




		.pop_box {
			display: flex;
			flex-direction: column;
			height: 400rpx;
			width: 600rpx;
			background-image: url("https://www.dingxians.cn/upload/images/user/bg-dialog-invite.png");
			background-size: 100% 100%;
			align-items: center;
			justify-content: center;

			.pop_header {
				margin: 20rpx auto 0 auto;
			}

			.pop_tip {
				font-size: 28rpx;
				text-align: center;
				color: white;
				margin-top: 40rpx;
			}

			.pop_user_box {
				display: flex;
				margin: 30rpx auto;
				width: 550rpx;
				justify-content: center;
				color: white;

				.pop_user_avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.pop_user {
					display: flex;
					flex-direction: column;
				}
			}

			.action-btn-group {
				color: white;

				.action-btn {
					line-height: 72rpx;
					text-align: center;
					width: 200rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}
			}

			.pop_code {
				text-align: left;
				background-color: #141414;
				color: white;
				border-radius: 10rpx;
				box-sizing: border-box;
				height: 76rpx;
				line-height: 76rpx;
				width: 540rpx;
				margin: 60rpx auto 45rpx;
				padding: 0 20rpx;
			}

			.give_btn_group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx 30rpx 30rpx;

				.give_btn {
					width: 160rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 10rpx;
					font-size: 30rpx;

					&.give_cancel {
						background-color: #e7e7e7;
					}

					&.give_confirm {
						background-color: #a361f6;
						color: #fff;
					}
				}
			}
		}
	}
</style>